<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据导入</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">


    <style>
        td{
            vertical-align: text-top;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <el-row>
                <el-upload
                        :action="uploadAction"
                        :headers="headers"
                        :on-success="uploadSuccess"
                        :file-list="uploadFileList" >
                    <el-button size="small" type="primary">选择xls文件</el-button>
                </el-upload>
            </el-row>

        </div>
        <table width="800px;" style="vertical-align: text-top;" v-if="tableShow" >
            <tr >
                <td>数据源</td>
                <td style="text-align: center;">操作</td>
                <td>未匹配字段</td>
                <td>
                    <template v-if="submitShow">
                        已匹配字段
                        <el-button type="primary" size="small" @click="importData">导入数据库</el-button>
                        <div style="padding: 2px 0px;">
                            <el-progress :text-inside="true" :stroke-width="26" :show-text="true" :format="formatProgress"  :percentage="percentage"></el-progress>
                        </div>
                    </template>
                </td>

            </tr>
            <tr>
                <td>
                    <el-collapse v-model="collapse1" >
                        <el-collapse-item title="xls数据源" name="1">
                            <div style="width: 250px;">
                                <el-radio-group size="small" v-model="leftSelects" >
                                    <template v-for="(item,index) in excelHeads" >
                                        <el-radio :label="item" border style="margin: 2px;"  >{{item}}</el-radio><br/>
                                    </template>

                                </el-radio-group>
                            </div>
                        </el-collapse-item>

                    </el-collapse>
                </td>
                <td style="text-align: center;">
                    <div style="padding: 10px;"><el-button type="primary" size="small" @click="autopeipi">自动</el-button></div>
                    <div style="padding: 10px;"><el-button type="primary" size="small" @click="righthead">向右</el-button></div>
                    <div style="padding: 10px;"><el-button type="primary" size="small" @click="leftHead">向左</el-button></div>
                </td>
                <td>
                    <el-collapse v-model="collapse2" >
                        <el-collapse-item title="房间信息" name="1" >
                            <div style="width: 450px;">
                                <el-radio-group size="small" v-model="rightSelect" >
                                    <template v-for="(lable,index1) in databaseColumns['list1']" >
                                        <el-radio :label="lable.colName+'@list1-'+index1" border  style="margin: 2px 8px;width: 200px;" >{{lable.showName}}</el-radio>
                                    </template>
                                </el-radio-group>
                            </div>
                        </el-collapse-item>

                        <el-collapse-item title="应收信息" name="2" >
                            <div style="width: 450px;">
                                <el-radio-group size="small" v-model="rightSelect" >
                                    <template v-for="(lable,index1) in databaseColumns['list2']" >
                                        <el-radio :label="lable.colName+'@list2-'+index1" border style="margin: 2px 8px;width: 200px;"  >{{lable.showName}}</el-radio>
                                    </template>
                                </el-radio-group>
                            </div>
                        </el-collapse-item>



                    </el-collapse>
                </td>
                <td>
                    <template v-if="submitShow">
                        <!-- 已选择字段配置-->
                        <el-collapse v-model="collapse3" >
                            <el-collapse-item title="房间信息" name="1" >
                                <div style="width: 450px;">
                                    <el-radio-group size="small"  v-model="submitSelect" >
                                        <template v-for="(lable,index1) in submitData['list1']" >
                                            <el-radio :label="lable.colName+'@list1-'+index1+'-'+lable.leftName+'@'+lable.showName" border  style="margin: 2px 8px;width: 200px;" >{{lable.leftName}} => {{lable.showName}}</el-radio>
                                        </template>
                                    </el-radio-group>
                                </div>
                            </el-collapse-item>

                            <el-collapse-item title="应收信息" name="2" >
                                <div style="width: 450px;">
                                    <el-radio-group size="small"  v-model="submitSelect"  >
                                        <template v-for="(lable,index1) in submitData['list2']" >
                                            <el-radio :label="lable.colName+'@list2-'+index1+'-'+lable.leftName+'@'+lable.showName" border style="margin: 2px 8px;width: 200px;"  >{{lable.leftName}} => {{lable.showName}}</el-radio>
                                        </template>
                                    </el-radio-group>
                                </div>
                            </el-collapse-item>
                        </el-collapse>

                    </template>


                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            uploadAction:wwwurl+"/admin/api/UploadController/elementUiUploadDopostFileUpload",
            collapse1:["1"],
            collapse2:["1","2","3","4"],
            collapse3:["1","2","3","4"],
            leftSelects:[],
            rightSelect:[],
            excelHeads:[],
            databaseColumns:{},
            headers:{token:localStorage.getItem("token")},
            uploadFileList:[],
            tableShow:false,
            //已选择的配置字段
            submitShow:false,
            submitSelect:[],
            xlsPath:"",
            submitData:{list1:[],list2:[],list3:[],list4:[]},//已匹配好的字段需要提交服务器
            percentage:0//导入进度
        },
        created(){

        },
        methods:{
            formatProgress(p){
                return p+"%";
            },
            //获取导入进度
            async getImportPro(){
                const res = await postWebCustom(getTableId("694"),{});
                this.percentage = res.data;
                if(parseInt(res.data)<100){
                  this.getImportPro();
                }
            },
            //导入数据库
            async importData(){
                if(!this.submitShow){
                    top.alert("没有可匹配的字段");
                    return;
                }
                this.$confirm('是否需要导入数据库?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    this.percentage = 0;
                    setTimeout(function () {
                        vm.getImportPro();
                    },500);
                    const res = await postWebCustom(getTableId("947"),{xls:this.xlsPath,coltext:JSON.stringify(this.submitData)});
                    if(res.code == 0){
                        top.alert(res.msg);
                        return;
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });


            },
            //向左
            async leftHead(){
                if(this.submitSelect.length == 0){
                    top.alert("请选择字段再操作");
                    return ;
                }
                let colName = this.submitSelect.split("@")[0];
                let showName = this.submitSelect.split("@")[2];
                let hm = this.submitSelect.split("@")[1];
                let leftName = hm.split("-")[2];
                let rightObj = {"colName":colName,"showName":showName};
                console.log("hm.split(\"-\")[0]",hm.split("-")[0]);
                this.databaseColumns[hm.split("-")[0]].push(rightObj);
                this.excelHeads.push(leftName);
                this.submitData[hm.split("-")[0]].splice(hm.split("-")[1],1);
            },
            //向右
            async righthead(){
                if(this.leftSelects.length == 0 || this.rightSelect.length == 0){
                    top.alert("请选择字段再操作");
                    return ;
                }
                this.submitShow = true;
                let leftName = this.leftSelects;
                let rightName = this.rightSelect;

                let listnameIndex = rightName.split("@")[1];
                let obj = this.databaseColumns[listnameIndex.split("-")[0]][listnameIndex.split("-")[1]];
                obj["leftName"] = leftName;
                vm.submitData[listnameIndex.split("-")[0]].push(obj)

                //删除被选择的项
                for(let a=0;a<this.excelHeads.length;a++){
                    if(this.excelHeads[a] == leftName){
                        delete this.excelHeads[a];
                    }
                }
                let leftHead = [];
                await vm.excelHeads.forEach(function (value,index){
                    if(value != undefined){
                        leftHead.push(value);
                    }
                });
                vm.excelHeads = leftHead;
                this.databaseColumns[listnameIndex.split("-")[0]].splice(listnameIndex.split("-")[1],1);

            },
            //自动匹配
            async autopeipi(){
                let leftIndex = [];
                this.submitShow = true;
                await this.excelHeads.forEach(function (value,index){
                    let nameleft = value;
                    for(let b=1;b<=2;b++){
                        vm.databaseColumns['list'+b].forEach(function (value1,index1){
                            let nameRight = value1.showName;
                            if(nameleft == nameRight){
                                let obj = value1;
                                obj["leftName"] = nameleft;
                                vm.submitData["list"+b].push(obj)
                                leftIndex.push(index);
                                vm.databaseColumns["list"+b].splice(index1,1);
                            }
                        })
                    }
                });
                await leftIndex.forEach(function (value,index){
                    delete vm.excelHeads[value];
                });
                let leftHead = [];
                await vm.excelHeads.forEach(function (value,index){
                    if(value != undefined){
                        leftHead.push(value);
                    }
                });
                vm.excelHeads = leftHead;
            },
            //获取xls头
            async getXlsHead(){
              const res = await postWebCustom(getTableId("692"),{});
              if(res.code == 0){
                  this.getXlsHead();
              }else {
                  this.excelHeads = res.data;
              }
            },
            uploadSuccess(response, file, fileList){
                this.xlsPath = response.data.src;
                this.submitData.list1 = [];
                this.submitData.list2 = [];
                this.submitData.list3 = [];
                this.submitData.list4 = [];
                this.percentage = 0;
                this.getData();
                this.addXlsToRedis(response.data.src)
            },
            async addXlsToRedis(src){
                const res = await postWebCustom(getTableId("691"),{xls:src});
                this.getXlsHead();
            },
            //获取数据库字段
            async getData(){
                const res = await postWebCustom(getTableId("949"),{});
                this.databaseColumns = res.data;
                this.tableShow = true;
            }
        }
    });
</script>
</html>